<template>
  <div class="statistics-page">
    <div class="count-context">
      <div v-for="(item, index) in COUNT_OPTIONS" :key="index" class="count-item">
        <div class="top-content">
          <span>{{ item.title }}</span>

          <div class="status">{{ item.status }}</div>
        </div>

        <div class="center-content" :class="{ yellow: item.icon }">
          <Icon v-if="item.icon" type="md-swap" />
          {{ item.value }}{{ item.unit }}
        </div>

        <div class="bottom-content">
          <span>{{ item.countTitle }}</span>

          <div class="count-value">{{ item.countValue }}</div>
        </div>
      </div>
    </div>

    <div class="chart-context">
      <chart-content />
      <details-content />
    </div>

    <div class="table-content">
      <div class="nav-list">
        <div class="nav-item">最近通话记录</div>
      </div>

      <TemplateTable
        ref="tableRef"
        :data="tableData"
        :columns="tableColumns"
        :loading="loading"
        height="400px"
        :page="pageIndex"
        :page-size="pageSize"
        :total="total"
        border="none"
        size="small"
        stripe
        @page-change="handlePageChange"
      >
        <template #type="{ row }">
          <Tag
            color="primary"
            size="mini"
            >呼入</Tag
          >
        </template>
      </TemplateTable>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

import ChartContent from './components/ChartContent.vue'
import DetailsContent from './components/DetailsContent.vue'

const COUNT_OPTIONS = ref([
  {
    title: '呼入量',
    status: '今日-超管',
    value: 0,
    unit: '个',
    countTitle: '呼入总数',
    countValue: 17
  },
  {
    title: '呼出量',
    status: '今日-超管',
    value: 0,
    unit: '个',
    countTitle: '呼出总数',
    countValue: 1
  },
  {
    title: '通话时长',
    status: '今日-超管',
    value: 0,
    unit: '毫秒',
    countTitle: '总通话时长',
    countValue: '5分43秒868毫秒'
  },
  { title: '知识库总条数', value: 0, unit: '条', countTitle: '近一个月新增数', countValue: 2 },
  {
    title: '接单量',
    status: '今日-超管',
    value: 0,
    unit: '个',
    countTitle: '接单总数',
    countValue: 17
  },
  {
    title: '效能指标',
    status: '超管',
    value: '0.00',
    icon: '<Icon type="md-swap" />',
    unit: '%',
    countValue: '(今日接单量 0-昨日接单量 0) / 昨日接单量 0'
  },
  { title: '代办量', status: '超管', value: 3, unit: '个', countTitle: '已办总数', countValue: 16 },
  { title: '在线坐席', value: 2, unit: '位', countTitle: '总坐席数', countValue: 1 }
])

const tableColumns = computed(() => [
  {
    title: '序号',
    width: 80,
    formatter: ({rowIndex}) => {
      return rowIndex + 1
    }
  },
  {
    title: '接听号码',
    minWidth: 120,
    field: 'number'
  },
  {
    title: '主叫号码',
    minWidth: 100,
    field: 'phoneNumber',
    type: 'link'
  },
  {
    title: '呼叫类型',
    minWidth: 100,
    field: 'type',
    slot: 'type'
  },
  {
    title: '开始时间',
    minWidth: 180,
    field: 'starTime'
  },
  {
    title: '结束时间',
    minWidth: 180,
    field: 'endTime'
  },
  {
    title: '通话时长',
    minWidth: 140,
    field: 'time'
  },
  {
    title: '响铃时长',
    minWidth: 140,
    field: 'callTime'
  }
])

const pageIndex = ref(1)
const pageSize = 20
const total = ref(0)
const loading = ref(false)
const tableData = ref([
  {
    number: '1001',
    phoneNumber: '13800138000',
    type: '呼入',
    starTime: '2023-01-01 10:00:00',
    endTime: '2023-01-01 10:01:00',
    time: '1分',
    callTime: '10秒'
  }
])

const handlePageChange = () => {}
</script>

<style scoped lang="scss">
.statistics-page {
  
  .count-context {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    // grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    // grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 100%;
    .count-item {
      height: 140px;
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      .top-content,
      .bottom-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .top-content {
        color: #666;
        .status {
          background-color: #f7f2fd;
          border-radius: 4px;
          padding: 2px 4px;
          color: #8b78b5;
        }
      }

      .center-content {
        margin: 16px 0;
        font-size: 18px;
        font-weight: bold;
        &.yellow {
          color: #d9a07a;
        }
        .ivu-icon-md-swap {
          transform: scaleX(-1);
        }
      }

      .bottom-content {
        color: #666;
        .count-value {
          margin-left: auto;
        }
      }
    }
  }

  .chart-context {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    margin-top: 8px;
  }

  .table-content {
    background-color: #fff;
    border-radius: 8px;
    margin-top: 8px;
    padding: 16px;
    .nav-list {
      margin-bottom: 16px;
      .nav-item {
        color: #1c8de3;
      }
    }
  }
}
</style>
